<template >
    <div class="foot">
        <div class="box">
            <el-card class="box1">
                <div slot="header">关键字搜索</div>
                <div class="box1One">
                    <div class="one1">
                        <div class="q">搜索用户数</div>
                        <p style="font-size: 20px;">{{n}}</p>
                        <div class="left">
                            <VCharts class="cc" :options="options"></VCharts>
                        </div>
                    </div>
                    <div class="two">
                        <div class="w">搜索量</div>
                        <p style="font-size: 20px;">{{m}}</p>
                        <div class="left">
                            <VCharts class="cc" :options="options1"></VCharts>
                        </div>
                    </div>
                </div>
                <template>
                    <el-table :data="fen" style="width: 100%">
                        <el-table-column prop="pp" label="排名">
                        </el-table-column>
                        <el-table-column prop="word" label="种类">
                        </el-table-column>
                        <el-table-column prop="count" label="总搜索量">
                        </el-table-column>
                        <el-table-column prop="user" label="搜索用户数">
                        </el-table-column>
                        <el-table-column prop="no" label="点击率">
                        </el-table-column>
                    </el-table>
                </template>
                <el-pagination layout="prev, pager, next" :total="total" :page-size="query.pagesize"
                    :current-page="query.pagenum" @current-change="handleCurrentChange" @size-change="handleSizeChange">
                </el-pagination>
            </el-card>
            <el-card class="box2">
                <div slot="header">
                    <div class="one2">
                        <span>分类排行榜</span>
                        <span>
                            <el-radio-group v-model="titleText" @input="input">
                                <el-radio-button label="品类"></el-radio-button>
                                <el-radio-button label="商品"></el-radio-button>
                            </el-radio-group>
                        </span>
                    </div>
                </div>

                <div class="right">
                    <VCharts class="cc" :options="options2"></VCharts>
                </div>



            </el-card>
        </div>


    </div>
</template>

<script>
import text from '@/mixin/mixin'
import { getWord } from '@/api'
export default {
    mixins: [text],
    data() {
        return {
            getWord1: [],
            query: {
                pagenum: 1,
                pagesize: 4
            },
            total: 0,
            activeIndex: '1',
            titleText: '品类',
            options2: {},
            data: [],
            data3:[],
            n:0,
            m:0
        }
    },
    async mounted() {
        let res = await getWord()
        res.data.forEach((item) => {
            this.data.push(item.count)
            this.n+=item.count
        })
        this.n = this.n.toLocaleString()
        res.data.forEach((item) => {
            this.data3.push(item.user)
            this.m+=item.user
        })
        this.m = this.m.toLocaleString()
        res.data.forEach((item) => {
            this.data.push(item.count)
        })
        res.data.forEach((item) => {
            this.data3.push(item.user)
        })
        this.getWord1 = res.data

        this.total = this.getWord1.length
        this.getWord1.forEach((item, index) => {
            item.no = ((item.user / item.count) * 100).toFixed(2)

        })
        this.getWord1.sort((a, b) => {
            return b.no - a.no
        })
        this.getWord1.forEach((item, index) => {
            item.no = item.no + '%'
            item.pp = index + 1
        })

    },
    methods: {
        input(val) {
            this.titleText = val
            this.ww()
        },
        handleCurrentChange(val) {
            this.query.pagenum = val
        },
        handleSizeChange(val) {
            this.query.pagesize = val
        },
        ww() {
            let data = []
            if (this.titleText == '商品') {
                var { axisX, data1 } = this.category.data1
            } else {
                var { axisX, data1 } = this.category.data2
            }
            let a = data1.reduce((sum, item) => {
                return sum + item
            })
            axisX.forEach((item, index) => {
                let obj = {}
                obj.name = item
                obj.value = data1[index]
                obj.present = ((data1[index] / a) * 100).toFixed(2) + '%'
                data.push(obj)
            })
            this.options2 = {
                title: [
                    {
                        text: this.titleText + '分布',
                        left: '5%'
                    },
                    {
                        text: '累计订单量',
                        subtext: a,
                        left: '48%',
                        top: '40%',
                        textAlign: 'center'
                    }
                ],
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    right: 'right',
                    bottom: '20%',
                    formatter: function (name) {
                        let index = data.findIndex(item => item.name == name)
                        return name + '|' + data[index].present;
                    }
                },
                label: {
                    color: 'auto'
                },
                series: [
                    {
                        name: axisX.name,
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    }
                ]
            }
        }
    },
    watch: {
        category: {
            handler(val) {
                return this.ww()
            },
            deep: true
        }
    },
    computed: {
        options() {
            let obj = {
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: 0,
                    top: 10,
                },

                xAxis: {
                    show: false,
                    type: 'category',
                    boundaryGap: false,
                },
                yAxis: {
                    show: false,
                    

                },
                series: [
                    {
                        type: 'line',
                        data: this.data,
                        color: 'blue',
                        smooth: true,
                        areaStyle: {
                            color: 'purple'
                        },
                        showSymbol: false

                    }
                ]
            }
            return obj
        },
        options1() {
            let obj = {
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: 0,
                    top: 10,
                },

                xAxis: {
                    show: false,
                    boundaryGap: false,
                    type: 'category'
                },
                yAxis: {
                    show: false,
                    

                },
                series: [
                    {
                        type: 'line',
                        data: this.data3,
                        color: 'blue',
                        smooth: true,
                        areaStyle: {
                            color: 'purple'
                        },
                        showSymbol: false

                    }
                ]
            }
            return obj
        },
        fen() {
            let start = (this.query.pagenum - 1) * this.query.pagesize
            let end = start + this.query.pagesize
            return this.getWord1.slice(start, end)
        }
    }
}
</script>
<style lang="scss" scope>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

}

.box1 {
    width: 48%;
    height: 500px;
}

.box1One {
    width: 100%;
    display: flex;
    justify-content: space-around;
    // background: yellow;
}

.one1 {
    width: 49%;
    // background: red;

    .left {
        width: 100%;
        height: 80px;

        .cc {
            width: 100%;
            height: 100%;
        }
    }
}

.two {
    width: 49%;

    .left {
        width: 100%;
        height: 80px;

        .cc {
            width: 100%;
            height: 100%;
        }
    }

}



.box2 {
    width: 48%;
    height: 500px;

    .header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;


    }

}

.one2 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>